<template>
	<view class="page">

		<view>
			<view style="margin: auto;width: 100%;padding-top: 30rpx;text-align: center;">
				<image src="https://img.xieling.top/103.jpg" mode="widthFix" style="width: 500rpx;margin: auto;">
				</image>
			</view>
			<view style="margin: auto;width: 100%;margin-top: 30rpx;text-align: center;position: relative;">
				<image src="https://img.xieling.top/104.jpg" mode="widthFix" style="width: 700rpx;margin: auto;">
				</image>
				<view style="position: absolute;top: 140rpx;bottom: 0;left: 0;right: 0;">
					<view style="font-size: 42rpx;font-weight: bold;">亚长牛尊</view>
					<view class="crad-tip">
						<view class="tip-overall">

							<text>Ac9952555#dsgf32525</text>
						</view>
					</view>
					<view>
					</view>
				</view>
			</view>
			<view class="detalis-c">
				<view class="hui">
					收藏者
				</view>
				<view class="bai pai">
					看看
				</view>
				<view class="mar hui">
					藏品哈希值
				</view>
				<view class="tip-overall "
					style="width: 80%;margin: 10rpx auto;height: 100rpx;line-height: 100rpx;border-radius: 25rpx;">
					1gs5g1s2ds2fds62fsd62fsd26sad
				</view>
				<view class="hui mar">
					创作者
				</view>
				<view class="pai bai">
					中国博物馆
				</view>
				<view class="hui mar">
					生成时间
				</view>
				<view class="pai bai">
					2020.01.27 10:59:34
				</view>

			</view>
		</view>
		<view class="hui" style="width: 90%;margin: 0rpx auto 200rpx;">
			温馨提示:本数字藏品由发行方或者原创者拥有，除另外取得版权用这种

			<view class="img" style="margin:50rpx auto 0rpx;">
				<u-icon name="https://img.xieling.top/mayi.png" size="80" label="提供技术支持"></u-icon>

			</view>
		</view>
		<view class="de-bottom">
			<view class="grid">
				<view class="gg" @click="goshow">
					<u-icon label="炫耀" labelColor="#ffffff" size="25" name="https://img.xieling.top/delit2.png">
					</u-icon>
				</view>
				<view class="gg" @click="gotips">
					<u-icon label="转赠" labelColor="#ffffff" size="25" name="https://img.xieling.top/delit1.png">
					</u-icon>
				</view>
				<view class="gg" @click="zs(2)" style="position: relative;">
					<view class="tk" style="top:-200rpx;right: -74rpx;width: 300rpx;" v-show="show2">
						
						<u-icon @click="goxz" label="添加到私人藏馆" labelColor="#ffffff" size="25" name="file-text" color="#ffffff"></u-icon>
						<view class="" style="margin: 20rpx 0;">
							<u-line length="90%" ></u-line>
						</view>
						
						<u-icon label="生成头像" labelColor="#ffffff" size="25" name="file-text" color="#ffffff"></u-icon>
					</view>
					<u-icon label="使用" labelColor="#ffffff" size="25" name="https://img.xieling.top/delit3.png">
					</u-icon>
				</view>
				<view class="gg" @click="zs" style="border: none;position: relative; ">
					<view class="tk" v-show="show1">
						<u-icon @click="Goblk" label="证书" labelColor="#ffffff" size="25" name="file-text" color="#ffffff"></u-icon>
					</view>
					<u-icon labelColor="#ffffff" size="25" name="more-dot-fill" color="#ffffff"></u-icon>

				</view>
			</view>
		</view>
		<u-popup :show="show" :round="10" mode="bottom" @close="close" @open="open">
			<view style="background-color: #343635;border-radius: 25rpx;">
				<view class="" style="display: flex;justify-content: center;">
					<u-icon name="chat-fill" color="#e837ff" size="80"></u-icon>
				</view>
				<view class=""
					style="display: flex;flex-direction: column;align-items: center;width: 70%;margin: 20rpx auto;">
					<text style="font-size: 42rpx;">温馨提示</text><br>
					<text>本数字藏品尚未满足可以转赠的条件</text>
					<view class="hui" style="margin-top: 80rpx;">
						你的数字藏品在购买满180天或受赠满2年后，可以转赠给满十四周岁的实名用户。

					</view>
					<view class="hui" style="margin-top: 20rpx;">
						我们不支持任何形式的有偿转赠，请警惕欺诈风险。一旦发现异常行为，我们会对相关账户采取限制措施。
					</view>
					<view @click="gotips(2)"
						style="margin-top: 40rpx; width: 200rpx; border: 1px solid #ffffff;height: 100rpx;line-height: 100rpx;border-radius: 50rpx;text-align: center;">
						知道了
					</view>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: 0,
				show1:0,
				show2:0
			}
		},
		methods: {
			Goblk() {
				uni.navigateTo({
					url: '../blockchain_details/blockchain_details'
				})
			},
			goshow() {
				uni.navigateTo({
					url: '../show-off/show-off'
				})
			},
			gotips(e) {
				if (e == 2) {
					this.show = 0
				}else{
					this.show = 1
				}
				
				
			},
			goxz(){
				uni.navigateTo({
					url:'../download/download'
				})
			},
			zs(e){
				if(e==2){
					this.show2=!this.show2
				}else{
					this.show1=!this.show1
				}
				
				
			}

		}
	}
</script>

<style>
	.tk {
		position: absolute;
		top: -120rpx;
		right: 20rpx;
		width: 250rpx;
		border-radius: 10rpx;
		background-color: #000000;
		opacity: 0.7;
		padding: 20rpx;
	}

	>>>.u-popup__content {
		background-color: #000000 !important;
	}

	.de-bottom {
		background-color: #000000;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.grid {
		box-sizing: border-box;
		height: 80rpx;
		display: flex;

		justify-content: space-between;
		padding: 10rpx 50rpx;
		line-height: 80rpx;
		margin-top: 10rpx;
	}

	.gg {
		display: flex;
		flex: 1;
		border-right: 1px solid #8e908f;
		justify-content: center;
	}

	.page {
		width: 100%;
		height: auto;
		background-color: #0c0e0d;
		position: absolute;
		color: #FFFFFF;
		margin: 0;
	}

	.crad-tip {
		display: flex;
		text-align: center;
		margin-top: 20rpx;
		justify-content: center;
	}

	.tip-overall {
		height: 40rpx;
		position: relative;
		color: #2B2C2E;
		font-size: 22rpx;
		font-weight: 600;
		line-height: 40rpx;
		padding: 0rpx 10rpx;
		border-radius: 5rpx;
		margin-right: 10rpx;
		background-color: #f3e0bc;
	}

	.tip-overall image {
		width: 400rpx;
		height: 60rpx;
	}

	.detalis-c {
		width: 95%;
		margin: 80rpx auto 40rpx;
		background-color: #343635;
		text-align: center;
		padding: 40rpx 0rpx;
	}

	.hui {
		color: #8e908f;
	}

	.bai {
		font-size: 38rpx;

	}

	.mar {
		margin-top: 40rpx;
	}

	.pai {
		margin-top: 10rpx;
	}

	.img {
		display: flex;
		justify-content: center;
	}
</style>
